feat(components): add Slider components#1942
Open
zakk-verrilli-ld wants to merge 1 commit into
Open
Conversation
Add Slider, SliderTrack, SliderThumb, SliderFill, and SliderOutput, closing the React Aria Components gap for range selection. Supports single and range values, horizontal and vertical orientation, and a --slider-track-size variable so the thumb scales with the track. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
commit: |
nhironaka
approved these changes
Jul 1, 2026
nhironaka
left a comment
nhironaka
left a comment
Contributor
There was a problem hiding this comment.
tested keyboard accessibility and it worked!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Note
Try out Slider in Storybook -> https://626696a2018c1f004a1cde86-menozjhjnr.chromatic.com/?path=/docs/components-forms-slider--docs
Summary
Closes the React Aria Components gap for range selection by adding
Slider,SliderTrack,SliderThumb,SliderFill, andSliderOutputto@launchpad-ui/components.Calendar/Select/DatePickerprecedent — each is acomposeRenderProps+cvashell; keyboard/ARIA/focus/drag behavior stays in RAC.Slideruses theuseLPContextProps+SliderContextpattern for overridable props.SliderThumbperstate.valuesentry) and horizontal + vertical orientation ([data-orientation]CSS, not a cva variant).--lp-*tokens exclusively and works in light + dark. A single--slider-track-sizevariable drives the rail/fill thickness and the thumb diameter (* 2.5), so the thumb scales with the track. The track element itself is the rail (RAC forces the fill toheight: 100%), and the thumb is centered on the cross axis (top/left: 50%) to complement RAC'stranslate(-50%, -50%).Screenshots
Testing approaches
Slider.spec.tsx: single-thumb composition, range (two thumbs), and disabled state — all passing.Slider.stories.tsxfor discoverability + Chromatic + axe (every story has an accessible name via<Label>oraria-label).pnpm biome checkclean; package builds/typechecks viatsc --project tsconfig.build.json.Note
Low Risk
Additive UI-only API with no changes to existing components; behavior and a11y are delegated to React Aria.
Overview
Adds composable Slider primitives to
@launchpad-ui/components(Slider,SliderTrack,SliderThumb,SliderFill,SliderOutput), exported from the package with a minor changeset.The implementation wraps React Aria Slider with Launchpad styling (
cva+ CSS modules using--lp-*tokens).SliderusesSliderContextanduseLPContextPropslike other form controls. Consumers compose track, fill, thumb(s), optionalSliderOutput, andLabelfor naming; range sliders render one thumb per value viaSliderTrackrender props.Styling supports horizontal and vertical orientation via
[data-orientation], disabled/hover/focus states, and proportional sizing from--slider-track-size. Tests cover single value, range, and disabled; Storybook documents common patterns including formatted values.Reviewed by Cursor Bugbot for commit 5100863. Bugbot is set up for automated code reviews on this repo. Configure here.